<template>
  <div>
	<a-spin :spinning="loading">
		<a-modal v-model="detailModal" :footer="null" title="售后订单详情" width="60%">
			<!--   <a-spin class="my-20 flex justify-center		" v-if="modalLoading"  /> -->
      <section class="p-8 pl-24" style="background: #f0f0f0;">
        售后状态：{{statusLists[details.status]}}
      </section>
			<section class="p-8 pl-24" style="background: #f0f0f0;">
				用户信息：
			</section>
			<section class="flex flex-wrap mt-10 pl-24">
				<div class="mb-10" style="width: 50%;">下单人：{{ details.user.nickname }}</div>
			</section>
			<section class="p-8 pl-24" style="background: #f0f0f0;">
				商品信息：
			</section>
			<section class="flex flex-wrap mt-10 pl-24">
				<div class="mb-10" style="width: 50%;">商品名称：{{ details.spuName }}</div>
				<div class="mb-10" style="width: 50%;">退款金额：{{ details.refundPrice}}</div>
<!--				<div class="mb-10" style="width: 50%;">商品类型：{{ details.occurrenceTime }}</div>-->
<!--				<div class="mb-10" style="width: 50%;">商品分类：{{ details.occurrenceTime }}</div>-->
			</section>
			<section class="p-8 pl-24" style="background: #f0f0f0;">
				订单信息：
			</section>
			<section class="flex flex-wrap mt-10 pl-24">
				<div class="mb-10" style="width: 50%;">订单号：{{ details.orderNo }}</div>
				<div class="mb-10" style="width: 50%;">售后单号：{{ details.no}}</div>
        <div class="mb-10" style="width: 50%;">申请原因：{{details.applyReason}}</div>
        <div class="mb-10" style="width: 50%;">补充描述：{{details.applyDescription}}</div>
        <div class="mb-10" style="width: 100%;">补充凭证图片：
          <div class='flex flex-wrap'>
            <img :src='item' v-for='item in details.applyPicUrls' style='width: 100rpx;height: 100rpx;margin: 10rpx'/>
          </div>
        </div>
        <div class='flex' v-if='details.status==10'>
          <a-button type='primary' style='margin-right: 10px' @click='agreee'>同意</a-button>
          <a-button type='danger' @click='showModal=true'>拒绝</a-button>
        </div>
        <div class='flex' v-if='details.status==40'>
          <a-button type='primary' style='margin-right: 10px' @click='toback'>确认退款</a-button>
        </div>
			</section>
		</a-modal>

	</a-spin>
  <a-modal v-model='showModal' @ok='confirmOk' @cancel='showModal=false' title='拒绝原因' width='450px'>
    <a-spin :spinning='loading'>
      <div style='padding: 30px'>
        <a-input
          placeholder='请输入拒绝原因' v-model='auditReason'
        ></a-input>
      </div>
    </a-spin>
  </a-modal>
  </div>
</template>
<script>
  import { saleagree, saledetail ,saledisagree,salerefund} from '@/api'
	export default {
		data() {
			return {
        auditReason:'',
				loading: false,
				details: {},
				detailModal: false,
        showModal:false,
        statusLists: {10:'申请中',20:'商家同意退款',30:'待卖家收货',30:'已完成',40:'等待平台退款',50:'完成'},
        typeLists: {0:'普通订单',1:'秒杀订单',2:'砍价订单',3:'拼团订单',7:'服务订单'},
			}
		},
		computed: {},
		watch: {},
		async created() {},
		methods: {
     async toback(){
        let data={
          id:this.details.id
        }
        await salerefund(data)
       this.$emit('close')
       this.$message.success('操作成功')
      },
      async confirmOk(){
          if(this.auditReason==''){
            this.$message.error('请输入拒绝原因')
            return
          }
          let data={
            id:this.details.id,
            auditReason:this.auditReason
          }
          await saledisagree(data)
          this.detailModal=false
        this.$message.success('操作成功')
        this.$emit('close')
      },
      async agreee(){
        let data={
          id:this.details.id
        }
        await saleagree(data)
        this.detailModal=false
        this.$emit('close')
      },

			getData(val) {
				try {
        this.loading = true
          saledetail({
          id: val.saleAfterId,
        })
          .then((data) => {
            this.details = data
          })
          .finally(() => (this.loading = false))
      } catch (error) {
        console.log(error)
        this.loading = false
      }
			},
			open(data) {
				this.detailModal = true
			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/.ant-modal-body {
		padding-left: 0;
		padding-right: 0;
	}

	/deep/.GasolineRate {
		.ant-form-item-label {
			width: 100px !important;
			margin-bottom: 10px;
			text-align: right;
		}

		.searchBox {
			margin-bottom: 10px;
		}
	}

	.GasolineRateModal-row {
		.label {
			width: 150px;
			display: inline-block;
			vertical-align: top;
		}

		.ant-col {
			margin-bottom: 15px !important;
		}
	}
</style>